<template>
    <div class="container">
        <div class="wrapper no-thead">
            <el-row style="margin-left:20px;">
                <el-col :span="16">
                    <div class="grid-content bg-purple ">
                        <h3 class="card-head-title">当前空间性能</h3>
                        <div class="chart">
                            <!--日志监控组件.start-->
                            <monitor :monitorObject="monitorObject" 
                                     :memory_metrics="memory_metrics" 
                                     :cpu_metrics="cpu_metrics" 
                                     :namespaceName="currentNs">
                            </monitor>
                            <!--日志监控组件.end-->
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple ">
                        <h3 class="card-head-title">当前空间应用</h3>
                        <div class="chart">
                            <div id="chart-app" style="width:100%; height:180px;"></div>
                        </div>
                    </div>
                    <div class="grid-content bg-purple" style="margin-top:54px">
                        <h3 class="card-head-title">空间存储</h3>
                        <div class="chart">
                            <div id="chart-app" style="width:100%; height:180px;"></div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
import echarts from 'echarts';
import monitor from '@/components/monitorCenter/monitor';
export default {
    components: { monitor },
    data() {
        return {
            monitorObject: 'namespace',
            memory_metrics: 'memory/usage',
            cpu_metrics: 'cpu/usage_rate',
            chart_app: null
        }
    },
    methods: {
        //初始化饼图
        initPie(chartId, legendData, data) {
            this.chart_app = echarts.init(document.getElementById(chartId), 'macarons');
            this.chart_app.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: "{b}"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: legendData
                },
                series: [{
                    type: 'pie',
                    radius: ['40%', '60%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '14',
                                fontWeight: 'normal'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: data
                }]
            });
        },
        //统计应用
        statsAppPie(type) {
            let currentNs = this.userBaseInfo.getCurrentSelectedNamespace();
            let url_app = this.projectConfig.URL_API_APP_MANAGE_APP;
            url_app += "?namespace=" + currentNs;
            this.httpClient.httpClientget(url_app).then((response) => {
                let total = response.data.total;
                let total_error = response.data.total_error;
                let total_running = response.data.total_running;
                let total_close = response.data.total_close;
                let appLegendData = ['总数:' + total + '个', '运行中:' + total_running + '个', '已关闭:' + total_close + '个', '异常:' + total_error + '个'];
                let appData = [{
                    value: total,
                    name: '总数:' + total + '个'
                }, {
                    value: total_running,
                    name: '运行中:' + total_running + '个'
                }, {
                    value: total_close,
                    name: '已关闭:' + total_close + '个'
                }, {
                    value: total_error,
                    name: '异常:' + total_error + '个'
                }];
                if (type == 'init') {
                    this.initPie('chart-app', appLegendData, appData);
                } else {
                    this.chart_app.setOption({
                        tooltip: {
                            trigger: 'item',
                            formatter: "{b}"
                        },
                        legend: {
                            orient: 'vertical',
                            x: 'left',
                            data: appLegendData
                        },
                        series: [{
                            type: 'pie',
                            radius: ['40%', '60%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '14',
                                        fontWeight: 'normal'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data: appData
                        }]
                    });
                }
            });
        }
    },
    mounted: function() {
        var _this = this;
        //基于准备好的dom，初始化echarts实例
        require('echarts/theme/macarons');
        //应用统计  start
        this.statsAppPie('init');
        //应用统计  end
    },
    computed: {
        currentNs() {
            return this.$store.getters.namespace;
        }
    },
    watch: {
        currentNs(val) {
            this.statsAppPie('change');
        }
    }
}
</script>
<style scoped>

.wrapper {
    margin: 10px auto;
    display: flex;
}
.el-row {
    width: 100%;
    margin-right: 20px;
}


.tab-margin {
    margin: 12px 24px;
}

.chart {
    padding: 6px 20px;
    box-sizing: border-box;
}
</style>